<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018\6\8 0008
  Time: 13:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--最新版本--%>
<html>
<head>
    <title>管理界面</title>
    <head>
        <script type="text/javascript" src="/static/js/index.js"></script>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Fancy 3D-Button" />
        <meta name="keywords" content="" />
        <meta name="author" content="" />
        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
        <link rel="stylesheet" type="text/css" href="http://www.cssmoban.com/statics/css/code-demo.css" />


        <style>
            a.button {
                position: relative;
                color: rgb(255, 200, 237);
                text-decoration: none;
                background-color: rgb(86, 95, 86);
                font-family: 'Yanone Kaffeesatz';
                font-weight: 700;
                font-size: 3em;
                display: block;
                padding: 4px;
                -webkit-border-radius: 8px;
                -moz-border-radius: 8px;
                border-radius: 8px;
                -webkit-box-shadow: 0px 9px 0px rgb(59, 65, 59), 0px 9px 25px rgba(0,0,0,.7);
                -moz-box-shadow: 0px 9px 0px rgb(59, 65, 59), 0px 9px 25px rgba(0,0,0,.7);
                box-shadow: 0px 9px 0px rgb(59, 65, 59), 0px 9px 25px rgba(0,0,0,.7);
                margin: 100px auto;
                width: 160px;
                transform:translate(-700px,-200px);


                -webkit-transition: all .1s ease;
                -moz-transition: all .1s ease;
                -ms-transition: all .1s ease;
                -o-transition: all .1s ease;
                transition: all .1s ease;
            }

            a.button:active {
                -webkit-box-shadow: 0px 3px 0px rgb(59, 65, 59), 0px 3px 6px rgba(0,0,0,.9);
                -moz-box-shadow: 0px 3px 0px rgb(59, 65, 59), 0px 3px 6px rgba(0,0,0,.9);
                box-shadow: 0px 3px 0px rgb(59, 65, 59), 0px 3px 6px rgba(0,0,0,.9);
                position: relative;
                top: 6px;
            }
        </style>

        <!-- WEB字体调用 -->
        <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700' rel='stylesheet' type='text/css'>


        <jsp:include page="/static/common/common.jsp"></jsp:include>
        <%--引入样式--%>
        <link rel="stylesheet" href="/static/style/reset.css">
        <link rel="stylesheet" href="/static/style/public.css">
        <link rel="stylesheet" type="text/css" href="/css/normalize.css" />
        <link rel="stylesheet" type="text/css" href="/css/htmleaf-demo.css">
        <link rel="stylesheet" href="/css/main.css">
        <script type="text/javascript">
            jQuery(function($){
                $('#container').vidbg({
                    'mp4': '/static/JVB/media/mp4_video_1.3gp',
                    'poster': '/static/JVB/media/fallback.jpg',
                }, {
                    // Options
                    muted: true,
                    loop: true,
                    overlay: true,
                });
            });
        </script>
        <script>
            //lay有五个区域中间是必须的边缘面板都是可选的
            $(function () {
                $("li").click(function () {
                    var url = $(this).data("url");
                    console.log(url);
                    var text = $(this).text();
                    if(url) {
                        //判断是否已经存在
                        var exists = $("#myTabs").tabs('exists', text);
                        if (exists) {
                            //选中该选项卡
                            $("#myTabs").tabs('select', text);
                        } else {
                            //创建选项卡面板
                            $("#myTabs").tabs('add', {
                                title: text,
                                //href: node.url,//只会引入body里面的内容,相当于把里面的内容加到原来的页面
                                //很有可能出现id重复或方法名重复的问题
                                content: '<iframe src="' + url + '" height="100%" width="100%" frameborder="0"></iframe>',
                                closable: true
                            })
                        }
                    }
                })

                $("#myTree").tree({
                    url:'/menu/selectEmployeeMenu.do',
                    //展开时的动画效果
                    animate:true,
                    //虚线
                    lines:true,
                    //在点击时触发的事件
                    onClick:function (node) {
                        if(node.url) {
                            //判断是否已经存在
                            var exists = $("#myTabs").tabs('exists', node.text);
                            if (exists) {
                                //选中该选项卡
                                $("#myTabs").tabs('select', node.text);
                            } else {
                                //创建选项卡面板
                                $("#myTabs").tabs('add', {
                                    title: node.text,
                                    //href: node.url,//只会引入body里面的内容,相当于把里面的内容加到原来的页面
                                    //很有可能出现id重复或方法名重复的问题
                                    content: '<iframe src="' + node.url + '" height="100%" width="100%" frameborder="0"></iframe>',
                                    closable: true
                                })
                            }
                        }
                    }
                })
            })
        </script>



    </head>
<body>
<table id="myGrid" width="500px" >
</table>
<div class="easyui-layout" fit="true">
    <!--split是分割,如果是false就不能拖动分割-->
    <div data-options="region:'north',split:true" style="height:100px;">
        <div class="public-header-warrp">
            <div class="public-header">
                <div class="content"  style="background:url(/static/images/n1.png);height: 100px;width: 1920px;">
                    <%--此处用于放置logo--%>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<%--<img  src="/static/images/logo.jpg" width="120" height="70"/>--%>
                    <div class="public-header-admin fr">
                      <%--  <p class="admin-name"><img src="/static/images/admin.png" width="20"><font  color ="green">您好！</font> <span><shiro:principal property="username"/></span></p>--%>
                        <div class="public-header-fun fr">
                            <a href="/logout.do" class="public-header-loginout">安全退出</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div data-options="region:'south',split:true" style="height:30px;">
        <p align="center">版权声明</p>
    </div>
    <div data-options="region:'west',title:'West',split:true" style="width:190px;">
        <!--fit设置为true的话可以自适应左边的大小 这是最左端的下拉列表-->
        <div class="easyui-accordion" fit="true">
            <div title="客户管理">
                <li data-url="/customer/customer.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;潜在客户管理</font></li>
                <li data-url="/customer/resource.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;客户资源池管理</font></li>
                <li data-url="/customer/official.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;正式客户管理</font></li>
                <li data-url="/custurn/view.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;移交记录</font></li>
                <li data-url="/faillog/view.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;开发失败记录</font></li>
                <li data-url="/faillog/run.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;客户流失</font></li>
                <li data-url="/plan/view.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;潜在用户开发计划</font></li>
                <li data-url="/plan/cusplan.do"><font style="color:#E2FF89" size="2px">&nbsp;&nbsp;<img src="/static/images/customer.png" sizes="">&nbsp;正式用户维护计划</font></li>
            </div>
            <div title="系统菜单">
                <li data-url="/employee/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/employee.png" sizes="2px">&nbsp;员工管理</font></li>
                <li data-url="/department/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/employee.png" sizes="2px">&nbsp;部门管理</font></li>
                <li data-url="/menu/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/employee.png" sizes="2px">&nbsp;菜单管理</font></li>
                <li data-url="/role/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/employee.png" sizes="2px">&nbsp;角色管理</font></li>
                <li data-url="/permission/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/employee.png" sizes="2px">&nbsp;权限管理</font></li>
                <li data-url="/dataDictionary/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/employee.png" sizes="2px">&nbsp;数据字典</font></li>
            </div>
            <div title="信息管理">
                <li data-url="/organization/view.do"><font style="color:#d5d5ff" size="2px">&nbsp;&nbsp;<img src="/static/images/image.png" sizes="2px">&nbsp;机构信息</font></li>
                <li data-url="/product/view.do"><font style="color:#d5d5ff" size="2px">&nbsp;&nbsp;<img src="/static/images/image.png" sizes="2px">&nbsp;产品信息</font></li>
                <li data-url="/carInformation/view.do"><font style="color:#d5d5ff" size="2px">&nbsp;&nbsp;<img src="/static/images/image.png" sizes="2px">&nbsp;车辆信息</font></li>
            </div>
            <div title="员工管理">
                <li data-url="/attendance/view.do"><font style="color:#a47e3c" size="2px">&nbsp;&nbsp;<img src="/static/images/emp.png" sizes="2px">&nbsp;考勤管理</font></li>
                <li data-url="/taskExecute/view.do"><font style="color:#a47e3c" size="2px">&nbsp;&nbsp;<img src="/static/images/emp.png" sizes="2px">&nbsp;任务管理</font></li>
                <li data-url="/salary/view.do"><font style="color:#a47e3c" size="2px">&nbsp;&nbsp;<img src="/static/images/emp.png" sizes="2px">&nbsp;薪资管理</font></li>
            </div>
            <div title="保单管理">
                <li data-url="/insurance/add.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/bapdan.png" sizes="2px">&nbsp;车险投保</font></li>
                <li data-url="/insurance/tempStor.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/bapdan.png" sizes="2px">&nbsp;暂存单</font></li>
                <li data-url="/insurance/correct.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/bapdan.png" sizes="2px">&nbsp;批改单</font></li>
                <li data-url="/insurance/audit.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/bapdan.png" sizes="2px">&nbsp;待审单</font></li>
                <li data-url="/insurance/history.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/bapdan.png" sizes="2px">&nbsp;单据历史记录</font></li>
            </div>
            <div title="见费出单">
                <li data-url="/insurance/payProcess.do"><font style="color:#c97b7e" size="2px">&nbsp;&nbsp;<img src="/static/images/money.png" sizes="2px">&nbsp;缴费处理</font></li>
                <li data-url="/insurance/chargeQuery.do"><font style="color:#c97b7e" size="2px">&nbsp;&nbsp;<img src="/static/images/money.png" sizes="2px">&nbsp;收费查询</font></li>
            </div>
            <div title="报表管理">
                <li data-url="/chart/listSale.do"><font style="color:#3f8090" size="2px">&nbsp;&nbsp;<img src="/static/images/chart.png" sizes="2px">&nbsp;销售报表</font></li>
                <li data-url="/chart/listClaim.do"><font style="color:#3f8090" size="2px">&nbsp;&nbsp;<img src="/static/images/chart.png" sizes="2px">&nbsp;理赔报表</font></li>
            </div>
            <div title="理赔管理">
                <li data-url="/newCase/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/qian.png" sizes="2px">&nbsp;新增报案表</font></li>
                <li data-url="/accidentDetail/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/qian.png" sizes="2px">&nbsp;事故明细表</font></li>
                <li data-url="/auditBill/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/qian.png" sizes="2px">&nbsp;审核单</font></li>
                <li data-url="/auditBill/loss.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/qian.png" sizes="2px">&nbsp;事故赔损表</font></li>
                <li data-url="/clientCase/view.do"><font style="color:#afd9ee" size="2px">&nbsp;&nbsp;<img src="/static/images/qian.png" sizes="2px">&nbsp;客户明细表</font></li>
            </div>
        </div>
    </div>
    <!--region的意思是范围 -->
    <div id="center" data-options="region:'center'" >
        <div id="myTabs" class="easyui-tabs " fit="true">
            <div title="欢迎界面" closable="true" id="container">
                <div style="margin-top: 70px;margin-left: 500px">
                <p style="font-size: 70px">有意思车险有限公司</p>
                </div>
                <div style="margin-top: 20px;margin-left: 710px">
                    <p style="font-size: 20px">我杀我自己 by 琪琪</p>
                </div>
               <%-- <div id="main">
                        <section class="section-second">
                            <div class="text">
                                <h1>琪琪琪琪琪琪琪琪琪琪琪琪车险有限公司</h1>
                                <h3>我杀我自己 by 琪琪</h3>
                            </div>
                        </section>
                    </div>--%>
                <a href="javascript:void(0);" onclick="sign()" class="button">&nbsp&nbsp&nbsp&nbsp&nbsp签到</a>
                <!-- +++演示代码区结束+++ -->
                <a href="javascript:void(0);" onclick="signOut()" class="button">&nbsp&nbsp&nbsp&nbsp&nbsp签退</a>
                <div class="htmleaf-container">
                    <main>
                        <!-- DAY OF THE WEEK -->
                        <div class="days">

                            <div class="day">
                                <p class="sunday">星期日</p>
                            </div>

                            <div class="day">
                                <p class="monday">星期一</p>
                            </div>

                            <div class="day">
                                <p class="tuesday">星期二</p>
                            </div>

                            <div class="day">
                                <p class="wednesday">星期三</p>
                            </div>

                            <div class="day">
                                <p class="thursday">星期四</p>
                            </div>

                            <div class="day">
                                <p class="friday">星期五</p>
                            </div>

                            <div class="day">
                                <p class="saturday">星期六</p>
                            </div>

                        </div>
                        <!-- CLOCK -->
                        <div class="clock">
                            <!-- HOUR -->
                            <div class="numbers">
                                <p class="hours"></p>
                                <p class="placeholder">88</p>
                            </div>

                            <div class="colon">
                                <p>:</p>
                            </div>

                            <!-- MINUTE -->
                            <div class="numbers">
                                <p class="minutes"></p>
                                <p class="placeholder">88</p>
                            </div>

                            <div class="colon">
                                <p>:</p>
                            </div>

                            <!-- SECOND -->
                            <div class="numbers">
                                <p class="seconds"></p>
                                <p class="placeholder">88</p>
                            </div>

                            <!-- AM / PM -->
                            <div class="am-pm">

                                <!-- AM -->
                                <div>
                                    <p class="am">am</p>
                                </div>

                                <!-- PM -->
                                <div>
                                    <p class="pm">pm</p>
                                </div>
                            </div>

                        </div><!-- END CLOCK -->

                    </main>
                </div>

                <script type="text/javascript">
                    //invokes functions as soon as window loads
                    window.onload = function(){
                        time();
                        ampm();
                        whatDay();
                        setInterval(function(){
                            time();
                            ampm();
                            whatDay();
                        }, 1000);
                    };


                    //gets current time and changes html to reflect it
                    function time(){
                        var date = new Date(),
                            hours = date.getHours(),
                            minutes = date.getMinutes(),
                            seconds = date.getSeconds();

                        //make clock a 12 hour clock instead of 24 hour clock
                        hours = (hours > 12) ? (hours - 12) : hours;
                        hours = (hours === 0) ? 12 : hours;

                        //invokes function to make sure number has at least two digits
                        hours = addZero(hours);
                        minutes = addZero(minutes);
                        seconds = addZero(seconds);

                        //changes the html to match results
                        document.getElementsByClassName('hours')[0].innerHTML = hours;
                        document.getElementsByClassName('minutes')[0].innerHTML = minutes;
                        document.getElementsByClassName('seconds')[0].innerHTML = seconds;
                    }

                    //turns single digit numbers to two digit numbers by placing a zero in front
                    function addZero (val){
                        return (val <= 9) ? ("0" + val) : val;
                    }

                    //lights up either am or pm on clock
                    function ampm(){
                        var date = new Date(),
                            hours = date.getHours(),
                            am = document.getElementsByClassName("am")[0].classList,
                            pm = document.getElementsByClassName("pm")[0].classList;


                        (hours >= 12) ? pm.add("light-on") : am.add("light-on");
                        (hours >= 12) ? am.remove("light-on") : pm.remove("light-on");
                    }

                    //lights up what day of the week it is
                    function whatDay(){
                        var date = new Date(),
                            currentDay = date.getDay(),
                            days = document.getElementsByClassName("day");

                        //iterates through all divs with a class of "day"
                        for (x in days){
                            //list of classes in current div
                            var classArr = days[x].classList;

                            (classArr !== undefined) && ((x == currentDay) ? classArr.add("light-on") : classArr.remove("light-on"));
                        }
                    }
                </script>

            </div>
        </div>
    </div>
</div>
</body>
</html>